<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<!-- 输入核销码 -->
			<view class="sheetCode" v-if="user.type == 1">
				<input type="text" placeholder-class="pClass" placeholder="请商家输入核销密码" v-model="mima" />
				<view class="btn" @click="hexiao">商家核销按钮(商家专用)</view>
			</view>
			<!-- 虚拟物品发货信息 -->
			<view class="fakeCode bg-color" v-if="user.type == 2">
				<view class="title">虚拟物品发货信息</view>
				<view class="codenum">
					<text class="num">{{user.remarks}}</text>
					<view class="btn" @click="fuzhi(user.remarks)">复制</view>
				</view>
			</view>
			<view class="sheetCodetitle" v-if="user.type == 1 || user.type == 2">商品信息</view>
			<!-- 订单状态 -->
			<view class="state bg-color" v-if="false">
				<view class="title">待付款</view>
				<view class="ftitle">订单将在15:23:36后关闭，请及时支付</view>
			</view>
			<!-- 订单地址 -->
			<view class="bg-color tn-flex tn-flex-col-center dizhi" v-if="user.type == 0">
				<image src="/static/index/dizhiIcon.png" class="left" mode=""></image>
				<view class="center">
					<view class="name">{{user.name}} {{user.mobile}}</view>
					<view class="city">{{user.address}}</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="bg-color goods">
				<view class="user tn-flex">
					<view class="user-left">
						<image :src="user.goodsimage" mode=""></image>
					</view>
					<view class="user-right tn-flex">
						<view class="name tn-text-ellipsis-2">{{user.goods_name}}</view>
						<view class="price-num">
							<view class="price">
								<text class="p2">￥</text>
								<text class="p1">{{user.goods_price}}</text>
							</view>
							<view class="num">x{{user.num}}</view>
						</view>

					</view>
				</view>
				<view class="goods-indu">
					<text class="t1">商品金额</text>
					<text class="t1">￥{{user.goods_price}}</text>
				</view>
				<view class="goods-indu">
					<text class="t1">实付款</text>
					<text class="t1 t2">￥{{user.total_price}}</text>
				</view>
				<view class="leave" v-if="user.remark">
					<view class="t1">买家留言</view>
					<view class="message-contents">{{user.remark}}</view>
				</view>
			</view>
			<view class="bottom">
				<view class="list">
					<text class="t1">订单编号：{{user.order_no}}</text>
					<text class="copy-btn" @click="fuzhi(user.order_no)">复制</text>
				</view>
				<view class="list">
					<text class="t1">下单时间：{{user.create_time}}</text>
				</view>
			</view>
			<view class="" style="height: 100rpx;"></view>
			<view class="foot tn-flex" v-if="user.state==3">
				<!-- <view class="btn1">取消订单</view> -->
				<view class="btn2" @click="shouhuo">确认收货</view>
				<!-- <view class="btn2">完成订单</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				user: '',
				show: false,
				mima: ''

			};
		},
		onLoad(option) {
			this.id = option.id
			this.getuser()
		},
		methods: {

			async getuser() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/shop/order_detail',
						data: {
							id: this.id
						}
					});
					this.user = result.data.data
					this.show = true
				} catch (e) {
					//TODO handle the exception
				}
			},
			async hexiao() {
				try {
					if (this.mima == '') {
						this.msg('请输入核销密码')
						return
					}
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/shop/hexiao',
						data: {
							id: this.id,
							mima: this.mima
						}
					});
					this.getuser()
					uni.showModal({
						title: '温馨提示',
						content: '核销成功，请为顾客服务哟！'
					});
				} catch (e) {
					uni.showToast({
						title: e.data.msg,
						icon: 'none'
					})
				}

			},
			async shouhuo() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/shop/upstate',
						data: {
							id: this.id,
							state: 4
						}
					});
					this.msg('确认成功')
					setTimeout(() =>{
						this.getuser()
					},800)
				} catch (e) {
					console.log(e)
					this.msg(e.data.msg)
				}
			},
			fuzhi(neirong) {
				uni.setClipboardData({
					data: neirong,
					complete() {
						uni.showToast({
							title: "已复制到剪贴板",
							icon: "none"
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.bg-color {
			background: #211C37;
		}

		.sheetCode {
			padding: 30rpx;

			input {
				height: 90rpx;
				background: #211C37;
				border-radius: 20rpx;
				color: #FFFFFF;
				padding-left: 24rpx;
			}

			.pClass {
				font-size: 30rpx;
				font-weight: 400;
				color: #CCCCCC;
			}

			.btn {
				height: 88rpx;
				background: linear-gradient(270deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin-top: 24rpx;
			}

		}

		.sheetCodetitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
			margin-left: 30rpx;
			margin-bottom: 24rpx;
		}

		.fakeCode {
			height: 144rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.title {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.codenum {
				display: flex;
				align-items: center;

				.num {
					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.btn {
					width: 80rpx;
					height: 37rpx;
					border-radius: 60rpx;
					border: 1px solid #EABAFF;
					font-size: 24rpx;
					font-weight: 500;
					color: #EABAFF;
					text-align: center;
					line-height: 37rpx;
					margin-left: 12rpx;
				}
			}
		}


		.state {
			height: 170rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.ftitle {
				font-size: 24rpx;
				font-weight: 400;
				color: #FBE12B;
				margin-top: 12rpx;
			}
		}

		.dizhi {
			height: 170rpx;
			padding: 0 30rpx;
			margin: 24rpx 0;

			.left {
				width: 80rpx;
				height: 80rpx;
			}

			.center {
				flex: 1;
				padding-left: 24rpx;

				.name {
					width: 500rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.city {
					font-size: 26rpx;
					font-weight: 400;
					color: #CCCCCC;
					margin-top: 8rpx;
				}
			}

			.right {
				width: 16rpx;
				height: 27rpx;
			}
		}

		.goods {
			padding: 24rpx 30rpx;
			margin-bottom: 24rpx;

			.user {
				.user-left {
					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}
				}

				.user-right {
					padding-left: 24rpx;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: #FFFFFF;

					}

					.price-num {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.num {
							font-size: 28rpx;
							font-weight: 400;
							color: #CCCCCC;
						}
					}



					.price {
						color: #FBE12B;
						font-weight: bold;

						.p1 {
							font-size: 40rpx;
						}

						.p2 {
							font-size: 24rpx;
						}
					}
				}
			}

			.t1 {
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.goods-indu {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				.t2 {
					color: #FBE12B;
				}
			}

			.leave {
				margin-top: 24rpx;

				.message-contents {
					font-size: 28rpx;
					font-weight: 400;
					color: #CCCCCC;
					margin-top: 16rpx;
				}
			}
		}

		.bottom {
			background: #211C37;
			border-radius: 20rpx;

			.list {
				height: 84rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24rpx;

				.t1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.copy-btn {
					font-size: 28rpx;
					font-weight: 400;
					color: #FBE12B;
				}
			}
		}

		.foot {
			width: 100%;
			height: 88rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #1D1E30;
			align-items: center;
			justify-content: flex-end;

			.btn1 {
				width: 160rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0);
				border-radius: 40rpx;
				border: 1px solid #9D5EF4;
				font-size: 28rpx;
				font-weight: 400;
				color: #9D5EF4;
				text-align: center;
				line-height: 64rpx;
			}

			.btn2 {
				width: 160rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 40rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 64rpx;
				margin-left: 24rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>